<template>
    <div>
        <header-view></header-view>
        <div class="login-wrap">
            <div>
                <div  style="width:62%;height:630px;margin-left:460px;border:5px solid #829593;">
                    <slider ref="slider" :options="options">
                        <slideritem v-for="(item,index) in someList" :key="index" :style="item.style">{{item.html}}</slideritem>
                        <div slot="loading">loading....</div>
                    </slider>
                </div>
                <p style="margin-top:40px;text-align: center;font-size: 140%;font-weight: bold; font-family: 'MT Extra';color: #6690ae ">
                    &emsp;&emsp;&emsp;&emsp;欢迎进入希迪克智能康复时代，
                    这是一个“信息化，智能化，家庭化，个性化”的世界
                  <br>
                    &emsp;&emsp;&emsp;&nbsp;&nbsp;给你想要的健康和未来，

                    是全球数字时代康复系统的领航者“希迪克”不断前进的目标</p>
                <quick-menu :menu-count=count :icon-class=icons :menu-url-list=list :background-color=backgroundColor :color=color :position=position></quick-menu>
                <p style="position: fixed;bottom:30px;margin-left: 800px">所有权：希迪克（郑州）智能康复设备有限公司</p>
            </div>
        </div>
    </div>
</template>

<script>
    import {doSignout} from "../../../api/hospital/login";
    import { updatePwd} from "../../../api/hospital/user";
    import {slider, slideritem} from 'vue-concise-slider'// 引入slider组件
    import quickMenu from "vue-quick-menu";
    export default {
        components: {
            quickMenu,slider,slideritem
        },

        data: function() {
            return {
                editVisible:false,
                editForm:{},
                count:4,
                icons:["el-icon-odometer","el-icon-basketball",'el-icon-reading','el-icon-setting'],
                list:[{'isLink':true,url:"/assess"},{'isLink':true,url:"/train"},{'isLink':true,url:"/trainRecord"},{'isLink':true,url:"/menu"}],
                backgroundColor:'#6690ae',
                color:'#ffffff',
                position:'bottom-left',
                isOpenNewTab:true,
                someList:[],
                options:{
                    currentPage: 0,
                    thresholdDistance: 5000,
                    thresholdTime: 4000,
                    autoplay:3000,
                    //是否循环播放
                    loop:true,
                    centeredSlides: true,
                    // direction:'vertical', 方向横向
                    loopedSlides:1,
                    timingFunction: 'ease',
                    speed:7000
                },
                editFormRules: {
                    userPwd: [
                        { required: true, message: '请输入用户原密码', trigger: 'blur' },
                        { pattern: /^[^\u4e00-\u9fa5]+$/, message: '不允许输入中文',trigger: 'blur'},
                        { pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+$/, message: '不允许输入空格等特殊符号',trigger: 'blur'},
                        { pattern: /[0-9a-zA-Z]{1,6}/, message: '只可以输入数字和字母',trigger: 'blur'},
                        { min: 6, max: 6, message: '密码必须为6位字符', trigger: 'blur' }
                    ],
                    userUPwd:[
                        { required: true, message: '请输入修改后的密码', trigger: 'blur' },
                        { pattern: /^[^\u4e00-\u9fa5]+$/, message: '不允许输入中文',trigger: 'blur'},
                        { pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+$/, message: '不允许输入空格等特殊符号',trigger: 'blur'},
                        { pattern: /[0-9a-zA-Z]{1,6}/, message: '只可以输入数字和字母',trigger: 'blur'},
                        { min: 6, max: 6, message: '修改后的密码必须为6位字符', trigger: 'blur' }
                    ],
                    userQPwd: [
                        { required: true, message: '请输入确认修改后的密码', trigger: 'blur' },
                        { pattern: /^[^\u4e00-\u9fa5]+$/, message: '不允许输入中文',trigger: 'blur'},
                        { pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+$/, message: '不允许输入空格等特殊符号',trigger: 'blur'},
                        { pattern: /[0-9a-zA-Z]{1,6}/, message: '只可以输入数字和字母',trigger: 'blur'},
                        { min: 6, max: 6, message: '确认修改后的密码必须为6位字符', trigger: 'blur' }
                    ],
                },
            };
        },
        mounted(){
            let that=this;
            setTimeout(function () {
                that.someList = [
                    {
                        // html: 'slide1',
                        style: {
                             'backgroundImage':'url('+require('../../../assets/img/one.png')+')',
                             // 'background': '#b6bec3' ,
                             'width':'100%'
                        }
                    },
                    {
                        // html: 'slide2',
                        style: {
                            'backgroundImage':'url('+require('../../../assets/img/two1.png')+')',
                        }
                    },
                    {
                        // html: 'slide3',
                        style: {
                            'backgroundImage':'url('+require('../../../assets/img/three2.png')+')',
                        }
                    }
                ]
            },500)
        },
        methods: {
            // 用户名下拉菜单选择事件
            handleCommand(command) {
                if (command == 'loginout') {//退出登录
                    // 二次确认退出登录
                    this.$confirm('确定要退出登录吗？', '提示', {
                        type: 'warning'
                    })
                        .then(() => {
                            //后台进行退出登录操作
                            doSignout({
                                userAcct: localStorage.getItem('ms_userAcct')
                            }).then(res => {
                                if (res.success==true){
                                    localStorage.removeItem('Authorization');
                                    localStorage.removeItem('ms_userAcct');
                                    this.$router.push('/login');
                                }
                            });
                        })
                        .catch(() => {
                            this.$message({
                                message:'已取消操作'
                            });
                        });
                }if (command == 'handleEdit') {//重置密码
                    this.editForm.userAcct=localStorage.getItem('ms_userAcct');
                    this.editVisible = true;
                } else if(command == 'systemexit'){//退出系统
                    __winx.exit();
                }
            },
            closeEdit(){//关闭重置密码弹出框
                this.editVisible=false;
                this.editForm={};
            },
            saveEdit(){
                // validate 函数 表单验证
                this.$refs['editForm'].validate((valid) => {
                    if (valid) {
                        //判断修改密码与确认修改密码是否一致
                        if (this.editForm.userUPwd != this.editForm.userQUPwd) {//不一致
                            this.$message.error("请确认两次输入的修改密码是否一致？");
                        } else {//一致
                            //调用后台
                            updatePwd({
                                userAcct: this.editForm.userAcct,
                                oldPassword: this.editForm.userPwd,
                                newPassword: this.editForm.userQUPwd
                            }).then(res => {
                                if (res.success) {
                                    this.editVisible = false;
                                    this.editForm = {};
                                    this.$message.success('重置成功请重新登录');
                                    localStorage.removeItem('ms_userAcct');
                                    this.$router.push('/login');
                                } else {
                                    this.$message.error(res.data);
                                }
                            });
                        }
                    }
                })
            },
        },
    };
</script>

<style scoped>
    /*一级目录圆的左右位置*/
    /deep/  .quick-menu {
        margin-bottom: 60px;
        margin-left:30px;
    }
    /*二级目录的大小*/
    /deep/ .quick-menu > .sub-menu{
        width: 120px;
        height: 120px;
        margin-right: 90px;
    }
    /*一级菜单打开时的样式*/
    /deep/ .quick-menu > .menu{
        width: 120px;
        height: 120px;
        margin-bottom: 90px;
        margin-top: 20px;
    }
    /deep/ .quick-menu>.menu .core-menu{
        width: 75px;
        height: 110px;
        left: 25px;
        top:8px;
    }
    /* 一级菜单×号的位置*/
    /deep/ .quick-menu>.menu .core-menu .bar{
        top:50%;
        left: 30px;
        width: 28px;
    }
  /*  二级目录的距离*/
    /deep/   .quick-menu .sub-menu a{
        margin-left: 138px;
    }
    /deep/ .quick-menu .sub-menu a i{
        font-size: 80px;
        margin-top: 10px;
    }
.login-wrap {
    position: relative;
    width: 100%;
    height: 1000px;
    background-color: rgba(130, 149, 147, 0.59);
}
.ms-title {
    width: 100%;
    line-height: 60px;
    text-align: center;
    font-size: 30px;
    color: #ffffff;
    /*color: #fff;
    color: #79e03e;
    /*color: #e0da2f;*/
    border-bottom: 1px solid #ddd;
}
.header .logo {
    float: left;
    width: 400px;
    line-height: 50px;
    margin-top: 15px;
}
.btn-bell .el-icon-bell {
    color: #fff;
}

cascader{
    margin-left: 10px;
}
.user-avator img {
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.header-avator img {
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

</style>
